<%--@elvariable id="lastTime" type="java.lang"--%>
<%--@elvariable id="friendGroupId" type="java.lang"--%>
<%--@elvariable id="friendChatRecords" type="java.util.List"--%>
<%--@elvariable id="friendChatRecord" type="com.genghis.ptas.friend.entity.FriendChatRecord"--%>
<%--@elvariable id="friendUser" type="com.genghis.ptas.security.entity.User"--%>
<%--@elvariable id="user" type="com.genghis.ptas.security.entity.User"--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <%@include file="../../common.jsp" %>

    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/pages/tasks.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="assets/css/print.css" rel="stylesheet" type="text/css" media="print"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body style="background-color: white !important;">
<!-- BEGIN CONTAINER -->
<div class="page-container">

    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="row ">
                <div>
                    <!-- BEGIN PORTLET-->
                    <div class="portlet">
                        <div class="portlet-body" id="chats">
                            <div class="scroller" style="height: 250px;" data-always-visible="1" data-rail-visible1="1">
                                <ul class="chats">
                                    <c:forEach var="friendChatRecord" items="${friendChatRecords}">
                                        <c:if test="${friendChatRecord.userId==friendUser.id}">
                                            <li class="in">
                                                <img class="avatar img-responsive" alt=""
                                                     src="${friendUser.userBaseInfo.photoUrl}"/>

                                                <div class="message">
                                                    <span class="arrow"></span>
                                                    <a href="javascript:" class="name"> ${friendUser.userName} </a>
                                                    <span class="datetime">在 ${fn:substring(friendChatRecord.sendDate, 0, 19)}</span>
                                                    <span class="body">${friendChatRecord.content}</span>
                                                </div>
                                            </li>
                                        </c:if>
                                        <c:if test="${friendChatRecord.userId==user.id}">
                                            <li class="out">
                                                <img class="avatar img-responsive" alt=""
                                                     src="${user.userBaseInfo.photoUrl}"/>

                                                <div class="message">
                                                    <span class="arrow"></span>
                                                    <a href="#" class="name"> ${user.userName} </a>
                                                    <span class="datetime"> 在 ${fn:substring(friendChatRecord.sendDate, 0, 19)}</span>
                                                    <span class="body"> ${friendChatRecord.content} </span>
                                                </div>
                                            </li>
                                        </c:if>
                                    </c:forEach>
                                </ul>
                            </div>
                            <label for="chatMessage"></label>

                            <div class="chat-form">
                                <div class="input-cont">
                                    <input id="chatMessage" name="chatMessage" class="form-control" type="text"
                                           placeholder="在这里输入..."/>
                                </div>
                                <div class="btn-cont">
									<span class="arrow">
									</span>
                                    <a href="javascript:" class="btn blue">
                                        <i class="fa fa-check icon-white"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END PORTLET-->
                </div>
            </div>
        </div>
    </div>
    <!-- END CONTENT -->

</div>
<!-- END CONTAINER -->

<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/scripts/core/app.js" type="text/javascript"></script>
</body>
<!-- END BODY -->
</html>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
    /** @namespace dataTemp.userId */

    var lastTime = "${lastTime}";

    $(function () {
        App.init();
        initChat();
        getNewRecord();
    });

    function addChatRecord(text) {
        $.ajax({
            url: "friend/addChatRecord",
            data: {
                friendGroupId: ${friendGroupId},
                userId: ${user.id},
                content: text
            },
            dataType: "json",
            type: "POST",
            success: function () {
            },
            error: function () {
            }
        });
    }

    function getNewRecord() {
        $.ajax({
            url: "friend/getNewRecord",
            data: {
                friendGroupId: ${friendGroupId},
                sendDate: lastTime
            },
            dataType: "json",
            type: "POST",
            success: function (data) {
                for (var i in data) {
                    var dataTemp = data[i];
                    addRecordToHtml(dataTemp.userId, dataTemp.sendDate, dataTemp.content);
                }
                lastTime = data.length == 0 ? lastTime : data[data.length - 1].sendDate;
            },
            error: function () {
            }
        });
        if (parent.$("#modalDialog").attr("aria-hidden") == "false")
            setTimeout(getNewRecord, 2000);
    }

    function addRecordToHtml(userId, datetime, text) {
        var cont = $('#chats');
        var list = $('.chats', cont);
        var form = $('.chat-form', cont);
        var input = $('input', form);

        var time = new Date();
        var time_str = time.toString("yyyy-MM-dd hh:mm-ss");
        time_str = datetime == "" ? time_str : datetime;
        var tpl = '';
        if (userId ==${user.id}) {
            tpl += '<li class="out">';
            tpl += '<img class="avatar" alt="" src="${user.userBaseInfo.photoUrl}"/>';
            tpl += '<div class="message">';
            tpl += '<span class="arrow"></span>';
            tpl += '<a href="javascript:" class="name">${user.userName}</a>&nbsp;';
        }
        if (userId ==${friendUser.id}) {
            tpl += '<li class="in">';
            tpl += '<img class="avatar" alt="" src="${friendUser.userBaseInfo.photoUrl}"/>';
            tpl += '<div class="message">';
            tpl += '<span class="arrow"></span>';
            tpl += '<a href="#" class="name">${friendUser.userName}</a>&nbsp;';
        }
        tpl += '<span class="datetime">在 ' + time_str + '</span>';
        tpl += '<span class="body">';
        tpl += text;
        tpl += '</span>';
        tpl += '</div>';
        tpl += '</li>';

        var msg = list.append(tpl);
        input.val("");
        $('.scroller', cont).slimScroll({
            scrollTo: list.height()
        });
    }

    function initChat() {
        var cont = $('#chats');
        var form = $('.chat-form', cont);
        var input = $('input', form);
        var btn = $('.btn', form);

        var handleClick = function (e) {
            e.preventDefault();
            var text = input.val();
            if (text.length == 0) {
                return;
            }
            <%--addRecordToHtml("${user.id}", "", text);--%>
            addChatRecord(text);
        };

        /*
         $('.scroller', cont).slimScroll({
         scrollTo: list.height()
         });
         */

        $('body').on('click', '.message .name', function (e) {
            e.preventDefault(); // prevent click event

            var name = $(this).text(); // get clicked user's full name
            input.val('@' + name + ':'); // set it into the input field
            App.scrollTo(input); // scroll to input if needed
        });

        btn.click(handleClick);

        input.keypress(function (e) {
            if (e.which == 13) {
                handleClick(e);
                return false; //<---- Add this line
            }
        });
    }

</script>
<!-- END JAVASCRIPTS -->